<script setup lang="ts">

import {CopyDocument, Plus} from "@element-plus/icons-vue";
</script>

<template>
  <div class="animation">
    <el-container style="height: 95vh; display: flex; flex-direction: column;">
      <el-header style="height: 5vh;margin-top: 16px">
        <el-row>
          <el-col :span="18">
            自定义动画
          </el-col>
          <el-col :span="3">
            <el-tooltip
                class="box-item"
                effect="dark"
                content="新建"
                placement="top"
            >
            <el-icon><Plus /></el-icon>
            </el-tooltip>
          </el-col>
          <el-col :span="3">
                   <el-tooltip
                class="box-item"
                effect="dark"
                content="复制到其他模型"
                placement="top"
            >
              <el-icon><CopyDocument /></el-icon>
            </el-tooltip>
          </el-col>
        </el-row>
      </el-header>
      <el-main style="flex: 1; display: flex; justify-content: center; align-items: center; overflow: hidden;">
        <div class="image-container">
          <img
              src="https://img2.baidu.com/it/u=2779514760,1567633763&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1735750800&t=120ce5138efefc9107f92a0e6d7bc377"
              alt="First Image" class="image"/>
        </div>
      </el-main>
      <el-header style="height: 5vh;margin-top: 16px">
        自带动画
      </el-header>
      <el-main style="flex: 1; display: flex; justify-content: center; align-items: center; overflow: hidden;">
        <div class="image-container">
          <img
              src="https://img2.baidu.com/it/u=2779514760,1567633763&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1735750800&t=120ce5138efefc9107f92a0e6d7bc377"
              alt="First Image" class="image"/>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
.animation {
  background-color: #1e2430;
  color: white;
  height: 95vh;
  overflow: auto;
}
</style>